<template>
  <div class="audit-contracts-container">
    <div class="header">
      <div class="header-content d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <button class="btn btn-outline-secondary mr-3" @click="goBack">
            <i class="fa fa-arrow-left mr-2"></i>返回
          </button>
          <h2>客户审核 - 待审核合同</h2>
        </div>
        <div class="search-bar">
          <div class="input-group">
            <input
                type="text"
                class="form-control"
                placeholder="搜索合同名称..."
                v-model="searchKeyword"
                @keyup.enter="fetchContracts"
            >
            <button class="btn btn-primary" @click="fetchContracts">
              <i class="fa fa-search mr-2"></i>搜索
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-indicator">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 错误消息 -->
    <div v-if="errorMessage" class="error-message">
      <i class="fa fa-exclamation-circle mr-2"></i>{{ errorMessage }}
    </div>

    <!-- 待审核合同列表 -->
    <div v-if="!loading && contracts.length > 0" class="contracts-table overflow-x-auto">
      <table class="table w-full border-collapse" style="table-layout: fixed;">
        <thead class="bg-gray-50">
        <tr>
          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">合同ID</th>
          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">合同名称</th>
<!--          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">项目经理</th>-->
<!--          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">客户公司</th>-->
          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">创建时间</th>
<!--          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">待审核条款数</th>-->
          <th class="py-3 px-4 text-left text-sm font-medium text-gray-500 uppercase tracking-wider border-b-2 border-gray-200">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="contract in contracts" :key="contract.id" class="border-b border-gray-200 hover:bg-gray-50 transition-colors duration-200">
          <td class="py-3 px-4 text-gray-700 border-b border-gray-200">{{ contract.id }}</td>
          <td class="py-3 px-4 text-gray-700 border-b border-gray-200">{{ contract.name }}</td>
<!--          <td class="py-3 px-4 text-gray-700 border-b border-gray-200">{{ contract.projectManagerName }}</td>-->
<!--          <td class="py-3 px-4 text-gray-700 border-b border-gray-200">{{ contract.customerCompanyName }}</td>-->
          <td class="py-3 px-4 text-gray-700 border-b border-gray-200">{{ formatDate(contract.createTime) }}</td>
<!--          <td class="py-3 px-4 border-b border-gray-200">-->
<!--            <span class="badge bg-warning">{{ contract.pendingClausesCount }}</span>-->
<!--          </td>-->
          <td class="py-3 px-4 border-b border-gray-200">
            <button
                @click="viewContractDetails(contract.id)"
                class="btn btn-sm btn-primary"
            >
              <i class="fa fa-eye mr-2"></i>查看详情
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 没有待审核合同 -->
    <div v-else-if="!loading && contracts.length === 0" class="empty-message text-center py-8">
      <i class="fa fa-check-circle text-success display-4 mb-3"></i>
      <h4>没有待审核的合同</h4>
      <p>所有合同条款均已完成审核</p>
    </div>

    <!-- 分页控件 -->
    <div v-if="!loading && totalPages > 1" class="pagination-container d-flex justify-content-center mt-4">
      <nav>
        <ul class="pagination">
          <li class="page-item" :class="{ disabled: currentPage === 1 }">
            <button class="page-link" @click="goToPage(currentPage - 1)">上一页</button>
          </li>
          <li class="page-item" v-for="page in pageNumbers" :key="page" :class="{ active: page === currentPage }">
            <button class="page-link" @click="goToPage(page)">{{ page }}</button>
          </li>
          <li class="page-item" :class="{ disabled: currentPage === totalPages }">
            <button class="page-link" @click="goToPage(currentPage + 1)">下一页</button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  name: 'CustomerAuditContracts',
  setup() {
    const store = useStore()
    const router = useRouter()

    const loading = ref(true)
    const errorMessage = ref('')
    const contracts = ref([])
    const totalPages = ref(1)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const searchKeyword = ref('')
    const totalContracts = ref(0)

    // 计算属性：分页号码数组
    const pageNumbers = computed(() => {
      let start = Math.max(1, currentPage.value - 2)
      let end = Math.min(start + 4, totalPages.value)

      if (end - start < 4 && start > 1) {
        start = Math.max(1, end - 4)
      }

      return Array.from({ length: end - start + 1 }, (_, i) => start + i)
    })

    // 获取待审核合同列表
    const fetchContracts = () => {
      loading.value = true
      errorMessage.value = ''

      const customerId = store.state.user?.id
      if (!customerId) {
        errorMessage.value = '用户信息不存在，请重新登录'
        loading.value = false
        return
      }

      const params = {
        page: currentPage.value - 1,
        size: pageSize.value,
        keyword: searchKeyword.value.trim()
      }

      axios.get(`/auth/contracts/pending-customer-audit`, {
        headers: {
          'X-Customer-Id': customerId
        },
        params
      })
          .then(response => {
            contracts.value = response.data.content || []
            totalPages.value = response.data.totalPages || 1
            totalContracts.value = response.data.totalElements || 0
          })
          .catch(error => {
            console.error('获取待审核合同失败', error)
            errorMessage.value = '获取待审核合同失败，请稍后再试'
          })
          .finally(() => {
            loading.value = false
          })
    }

    // 查看合同详情
    const viewContractDetails = (contractId) => {
      router.push(`/customer/audit-contract/${contractId}`)
    }

    // 跳转到指定页
    const goToPage = (page) => {
      if (page >= 1 && page <= totalPages.value && page !== currentPage.value) {
        currentPage.value = page
        fetchContracts()
      }
    }

    // 返回上一级页面
    const goBack = () => {
      router.go(-1)
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString()
    }

    onMounted(() => {
      fetchContracts()
    })

    return {
      loading,
      errorMessage,
      contracts,
      totalPages,
      currentPage,
      pageSize,
      searchKeyword,
      totalContracts,
      pageNumbers,
      fetchContracts,
      viewContractDetails,
      goToPage,
      formatDate,
      goBack
    }
  }
}
</script>


<style scoped>
.audit-contracts-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  margin-bottom: 30px;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-bar {
  max-width: 400px;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 300px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  color: #721c24;
  background-color: #f8d7da;
  border-left: 4px solid #f5c6cb;
  padding: 12px 15px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.contracts-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-message {
  color: #6c757d;
  font-style: italic;
  padding: 20px 0;
  text-align: center;
}

.pagination-container {
  margin-top: 30px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.page-item {
  margin: 0 2px;
}

.page-link {
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s;
  border: 1px solid #dee2e6;
  color: #495057;
  background-color: white;
}

.page-link:hover {
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

.page-item.active .page-link {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.page-item.disabled .page-link {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f8f9fa;
}

/* 表格样式优化 */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  word-break: break-word;
}

.table th {
  font-weight: 500;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #e5e7eb;
}

.table tbody tr {
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: #f8f9fa;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-outline-secondary {
  color: #6c757d;
  background-color: transparent;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
</style>